<script setup lang="ts">
import dayjs from 'dayjs'
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
import { fetchExchangeRecordDetailAPI } from '@/apis/fetchExchangeRecordDetail'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

const loading = ref(false)
const detail = ref<ExchangeRecordDetail | null>(null)

onLoad(async (options) => {
  if (options && options.id) {
    loading.value = true
    const res = await fetchExchangeRecordDetailAPI({ id: options.id }, userInfoStore.userInfo!.token!)
    if (res.data?.code === 1) {
      detail.value = res.data.data
      loading.value = false
    }
    else {
      uni.showToast({ title: res.data?.msg, icon: 'none' })
      loading.value = false
    }
  }
})

const statusName = computed(() => {
  return ['待核销', '已核销', '已过期'][Number(detail.value?.status) - 1]
})
</script>

<template>
  <view class="min-h-screen bg-#F8F8F8">
    <!-- 渐变背景 -->
    <view class="absolute left-0 top-0 h-990rpx w-screen from-#4999F7 to-#78D9FE to-opacity-0 bg-gradient-to-b" />
    <Spacer height="48" />
    <!-- 优惠券状态 START -->
    <view class="relative z-1 flex px-44rpx">
      <image class="my-8rpx h-40rpx w-40rpx" src="@/static/images/clock_outline.png" />
      <Spacer width="12" />
      <view>
        <view class="text-40rpx text-white font-semibold leading-56rpx">
          {{ statusName }}
        </view>
        <Spacer height="4" />
        <view class="text-28rpx text-white leading-40rpx">
          有效期：{{ `${dayjs(detail?.validate_start_time).format('YYYY-MM-DD')}-${dayjs(detail?.validate_end_time).format('YYYY-MM-DD')}` }}
        </view>
      </view>
    </view>
    <!-- 优惠券状态 END -->
    <Spacer height="62" />
    <view class="relative z-1 mx-44rpx min-h-1000rpx overflow-hidden rounded-20rpx bg-white p-40rpx">
      <view class="flex items-center">
        <uv-image
          width="200rpx"
          height="200rpx"
          radius="24rpx"
          :src="withDomain(detail?.image || '')"
        >
          <template #loading>
            <uv-loading-icon color="#666666" />
          </template>
        </uv-image>
        <Spacer width="24" />
        <view class="h-200rpx flex flex-col justify-between">
          <view class="text-32rpx text-#333333 font-medium leading-48rpx">
            {{ detail?.title }}
          </view>
          <view class="flex items-center justify-between rounded-15rpx from-#96CCFA bg-gradient-to-r px-17rpx py-13rpx">
            <view class="text-40rpx text-#1B85FF font-medium leading-56rpx">
              {{ detail?.use_score }}积分
            </view>
          </view>
        </view>
      </view>
      <Spacer height="40" />
      <Divider width="582" />
      <Spacer height="40" />
      <view class="w-full">
        <view class="flex">
          <view class="flex-shrink-0 text-24rpx text-#333333 font-medium leading-32rpx">
            兑换时间：
          </view>
          <view class="text-24rpx text-#848484 leading-32rpx">
            {{ detail?.create_time || '未知' }}
          </view>
        </view>
        <Spacer height="24" />
        <block v-if="detail?.status.toString() === '2'">
          <view class="flex">
            <view class="flex-shrink-0 text-24rpx text-#333333 font-medium leading-32rpx">
              到店核销时间：
            </view>
            <view class="text-24rpx text-#848484 leading-32rpx">
              {{ detail?.cannel_time || '未知' }}
            </view>
          </view>
          <Spacer height="24" />
        </block>
        <view class="flex">
          <view class="flex-shrink-0 text-24rpx text-#333333 font-medium leading-32rpx">
            使用说明：
          </view>
          <view class="text-24rpx text-#848484 leading-32rpx">
            <MpHtml :content="detail?.explain || '未知'" />
          </view>
        </view>
      </view>
      <!-- 两个半圆 看起来像裁剪了卡片 -->
      <view class="absolute top-262rpx h-32rpx w-32rpx rounded-full bg-#A1C8F8 -left-16rpx" />
      <view class="absolute top-262rpx h-32rpx w-32rpx rounded-full bg-#A1C8F8 -right-16rpx" />
    </view>
    <!-- 二维码卡片 END -->
    <Spacer height="140" />
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'redeemDetail'
layout: 'custom'
</route>
